<template>
  <div>
    <nav-header/>
    <a-card class="content">
      <div class="left-menu">
        <a-menu
            @click="onclickMenu"
            v-model:selectedKeys="selectedKeys"
            mode="horizontal"
            theme="dark">
          <a-menu-item key="1">
            <template #icon>
              <PieChartOutlined/>
            </template>
            <span>个人资料</span>
          </a-menu-item>
          <a-menu-item key="2">
            <template #icon>
              <DesktopOutlined/>
            </template>
            <span>我的说说</span>
          </a-menu-item>
          <a-menu-item key="3">
            <template #icon>
              <ShoppingCartOutlined/>
            </template>
            <span>我的接单</span>
          </a-menu-item>
          <a-menu-item key="4">
            <template #icon>
              <InboxOutlined/>
            </template>
            <span>我的发单</span>
          </a-menu-item>
        </a-menu>
      </div>
      <a-card class="right-content">
        <router-view/>
      </a-card>
    </a-card>
  </div>
</template>
<script>
import navHeader from "@/components/navHeader/navHeader";
import {defineComponent, reactive, toRefs, watch} from 'vue';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
  MailOutlined,
  DesktopOutlined,
  InboxOutlined,
  AppstoreOutlined,
  ShoppingCartOutlined
} from '@ant-design/icons-vue';
import message from "ant-design-vue";

export default defineComponent({
  name: "user",
  data() {
    return {}
  },
  methods: {
    onclickMenu(item) {
      switch (item.key) {
        case '1':
          this.$router.push('/userCenter/selfInfo')
          break
        case '2':
          this.$router.push('/userCenter/myTalkList')
          break
        case '3':
          this.$router.push('/userCenter/myReceiveTask')
          break
        case '4':
          this.$router.push('/userCenter/mySendTask')
          break
        default:
          message.error("非常抱歉,暂未开启此功能")
          break
      }
    }
  },
  components: {
    ShoppingCartOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    PieChartOutlined,
    MailOutlined,
    DesktopOutlined,
    InboxOutlined,
    AppstoreOutlined,
    navHeader
  },
  setup() {
    const state = reactive({
      selectedKeys: ['1'],
    });
    return {
      ...toRefs(state),
    };
  },
  created() {
    this.$router.push('/userCenter/selfInfo')
  }
});
</script>

<style scoped>
.content {
  width: 1200px;
  margin: 0 auto;
}

.left-menu {
  display: inline-block !important;
  background-color: black;
  width: 100%;
}

.right-content {
  box-shadow: #999595 2px 8px 10px 1px;
}
</style>